<script lang="ts" setup>
import { ref, reactive } from "vue";
import queryUserServiceApi from "@/api/modules/org/query/query-user";
import UserServiceApi from "@/api/modules/org/bean/user-bean";
import { UserEditUrl, UserAddUrl } from "@/views/org/mapping.json";
import { jumpPath } from "@/utils/router-kit";
import { ElMessageBox, ElMessage } from "element-plus";
import UserRoleSelectDialog from "./user-role-select-dialog.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import { JxtechTableColumn } from "@whjxtech/jxtech-component";
import { useJxtechPageTableExt } from "@/comp-ext";
const UserListTableRef = ref();
const { deleteSelectionDataList } = useJxtechPageTableExt(UserListTableRef);

const props = defineProps({
  queryParam: Object
});

const emit = defineEmits<{
  (e: "onRelUserClick"): void;
  (e: "handleCommand", command: string | number | object): void;
}>();

const UserTableState = reactive({
  /**查询参数 */
  queryParam: { likeAll: null },
  /**
   * 表格选中的数据
   */
  selectionData: [] as any[],
  /**
   * 表格的列配置
   */
  tableColumn: [
    { label: "序号", width: "50", type: "selection" },
    { label: "序号", width: "60", type: "index" },
    {
      prop: "userAccount",
      label: "用户账号",
      width: "180",
      align: "left",
      // sort: { sortable: 'custom' },
      type: "link",
      linkClick: (row: any) => jumpPath(UserEditUrl + row.userId + "?unitId=" + props.queryParam?.unitId)
    },
    { prop: "userFullname", label: "用户名称" },
    { prop: "unitName", label: "部门名称" },
    { prop: "main", label: "主要部门", width: "100", slot: "mainSlot" },
    { prop: "valid", label: "是否有效", width: "100", slot: "validSlot" },
    { prop: "userAccountLocked", label: "是否锁定", width: "100", slot: "userAccountLockedSlot" },
    { label: "操作", slot: "actionSlot", width: "200" }
  ] as JxtechTableColumn[],
  /**
   * 表格数据加载的方法
   */
  loadData: (params: any) =>
    queryUserServiceApi.queryPage(
      { queryName: "userList" },
      { ...props.queryParam, ...params, ...UserTableState.queryParam, refCols: "default" }
    ),
  /**
   * 表格导出excel的方法
   */
  expData: (params: any) => {
    return queryUserServiceApi.exportData(
      { queryName: "userList", refCols: "default" },
      { ...props.queryParam, ...params, ...UserTableState.queryParam }
    );
  },
  /**
   * 表格选中事件
   */
  tableSelectionChange: (dataList: any[]) => (UserTableState.selectionData = dataList),
  //新增数据方法
  onAddButtonClick: () => {
    jumpPath(UserAddUrl, { unitId: props.queryParam?.unitId });
  },
  /**
   * 表格删除事件
   */
  deleteTableData: () => {
    //删除表格数据提供两种不同的api 一个是整行数据数组删除 一个是取行主键id数组删除
    //deletePageTableSelectionDataList(UserListTableRef, dictionaryTypeApi);
    deleteSelectionDataList(UserServiceApi);
  },

  /**
   * 查询事件
   */
  handleSearch: () => UserListTableRef.value.loadTable(),
  // 用户角色弹窗是否显示
  visibleUserRoleDialog: false,
  // 选择的当前用户id
  currentUserId: "",
  // 角色关联
  onUserRoleClick: (userId: string) => {
    UserTableState.currentUserId = userId;
    UserTableState.visibleUserRoleDialog = true;
  },
  /**
   * 重置密码
   */
  resetPassWord: (account: string) => {
    ElMessageBox.confirm("确认重置该用户密码?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      lockScroll: false
    })
      .then(() => {
        UserServiceApi.resetPass({ account }).then((_res: any) => {
          ElMessage({
            type: "success",
            message: "操作成功"
          });
        });
      })
      .catch(() => {});
  },
  // 关联用户
  onRelUserClick() {
    emit("onRelUserClick");
  },
  //   导入按钮下拉点击事件
  handleCommand(command: string | number | object) {
    emit("handleCommand", command);
  }
});

defineExpose({
  getUserListTableRef: () => UserListTableRef.value,
  onDeleteButtonClick: () => UserTableState.deleteTableData(),
  onAddButtonClick: () => UserTableState.onAddButtonClick(),
  selectionData: () => UserTableState.selectionData
});
</script>
<template>
  <jxtech-basic-card title="用户信息">
    <template #operationSpace>
      <jxtech-search-input
        tips="用户账号/用户名称"
        v-model="UserTableState.queryParam.likeAll"
        @search="UserTableState.handleSearch"
      >
      </jxtech-search-input>
      <jxtech-button type="primary" @click="UserTableState.onRelUserClick" v-auth="'org:qxgl:zzyyh:save'">
        关联用户
      </jxtech-button>
      <el-dropdown @command="UserTableState.handleCommand">
        <jxtech-button type="primary" v-auth="'org:qxgl:zzyyh:save'">
          导入
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </jxtech-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="download-unit">下载部门模板</el-dropdown-item>
            <el-dropdown-item command="upload-unit">部门数据导入</el-dropdown-item>
            <el-dropdown-item command="download-user">下载用户模板</el-dropdown-item>
            <el-dropdown-item command="upload-user">用户数据导入</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <jxtech-add-button @click="UserTableState.onAddButtonClick" v-auth="'org:qxgl:zzyyh:save'"></jxtech-add-button>
      <jxtech-delete-button @click="UserTableState.deleteTableData" v-auth="'org:qxgl:zzyyh:delete'"></jxtech-delete-button>
    </template>
    <!-- <template #operationSpaceExtra>
     
    </template> -->
    <JxtechPageTableExt
      ref="UserListTableRef"
      row-key="userId"
      :table-column="UserTableState.tableColumn"
      :load-data="UserTableState.loadData"
      :exp-data="UserTableState.expData"
      full-table
      @selection-change="UserTableState.tableSelectionChange"
      border
    >
      <template #mainSlot="{ row }">
        <el-tag v-if="row.main === 'Y'" type="success" size="small">是</el-tag>
        <el-tag v-else type="danger" size="small">否</el-tag>
      </template>
      <template #validSlot="{ row }">
        <el-tag v-if="row.valid === 'Y'" type="success" size="small" effect="dark">有效</el-tag>
        <el-tag v-else type="info" size="small">无效</el-tag>
        <!-- <el-checkbox v-model="row.valid" true-label="Y" false-label="N" disabled></el-checkbox> -->
      </template>
      <template #userAccountLockedSlot="{ row }">
        <el-tag v-if="row.userAccountLocked === 'Y'" type="success" size="small">是</el-tag>
        <el-tag v-else type="danger" size="small">否</el-tag>
      </template>
      <template #actionSlot="{ row }">
        <el-link type="primary" @click="UserTableState.onUserRoleClick(row.userDeptId)">角色关联</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="primary" @click="UserTableState.resetPassWord(row.userAccount)">重置密码</el-link>
      </template>
    </JxtechPageTableExt>
  </jxtech-basic-card>

  <user-role-select-dialog
    v-if="UserTableState.visibleUserRoleDialog"
    v-model:visible="UserTableState.visibleUserRoleDialog"
    :user-dept-id="UserTableState.currentUserId"
  >
  </user-role-select-dialog>
</template>
<style scoped></style>
